<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>门店管理列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
	<link rel="stylesheet" href="../../css/news.css" media="all" />
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote news_search">
	<form class="layui-form">
        <div class="layui-inline">
            <label class="layui-form-label">门店名称</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="name" placeholder="请输入门店名称">
            </div>
        </div>
        
         <div class="layui-inline">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="phone" placeholder="请输入手机号码">
            </div>
        </div>
        
     
        <div class="layui-inline">
            <a class="layui-btn search_btn" lay-submit="" lay-filter="queryMerchant">查询</a>
        </div>
   
 		<div class="layui-inline">
			<a class="layui-btn layui-btn-normal merchantsAdd_btn">添加门店</a>
		</div>
		 </form>
		
	</blockquote>
	<div class="layui-form news_list">
	  	<table class="layui-table" id="merchantList" lay-filter="merchants"></table>
	</div>
	<div id="page"></div>
	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="plugins/layui/layui.js"></script>
	<!-- <script type="text/javascript" src="js/user/newsList.js"></script> -->

	<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="iconfont icon-edit"></i>编辑</a>
	    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon"></i>删除</a>
		  <a class="layui-btn layui-btn-xs layui-btn-xs" lay-event="changeLog">银行卡更换记录</a>
	  </script>
	<script type="text/javascript">
	layui.use(['table','form'], function(){
	    var table = layui.table;
	    var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
	    //方法级渲染
	     var tableIns= table.render({
	        elem: '#merchantList'
	        ,url: '/merchants'
	        ,cols: [[
	            {field:'id', title: 'ID', fixed: true}
	            ,{field:'name', title: '门店名称'}
	            ,{field:'username', title: '账号名'}
	            ,{field:'regionName', title: '所属地区'}
	            ,{field:'phone', title: '手机号'}
	            ,{field:'contacts', title: '联系人'}
	            ,{field:'address', title: '门店地址'}
	            ,{field:'officialAccount', title: '公众号'}
                 ,{field:'landline', title: '固定电话'}
	            ,{title: '操作', width:'20%',align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
	        ]]
	        ,id: 'testReload'
	        ,page: true
//	        ,height: 600
	    });
	    
	    form.on("submit(queryMerchant)", function (data) {
	        var name = data.field.name;
	        var phone = data.field.phone;
	
	        //表格重新加载
	        tableIns.reload({
	            where:{
	            	name:name,
	            	phone:phone
	            }
	        });

	        return false;
	    });
	    
	    table.on('tool(merchants)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	    	  var data = obj.data; //获得当前行数据
	    	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	    	  var tr = obj.tr; //获得当前行 tr 的DOM对象
	    	 
	    	  if(layEvent === 'detail'){ //查看
	    	    //do somehing
	    	  } else if(layEvent === 'del'){ //删除
	    	    layer.confirm('真的删除该门店吗', function(index){
	    	      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	    	      layer.close(index);
	    	      //向服务端发送删除指令
	    	      var ids=obj.data.id;
	    	      $.ajax({  
	    	            type: "DELETE",
	    	            url:"/merchants/delete/"+ids,
	    	            data:{id:ids},// 序列化表单值
	    	            success: function(res) {
	    	            	if(res.code==2000){
	    	            		top.layer.close(index);
	    	          			top.layer.msg("删除成功");
	    	            	}
	    	            } ,
	    		 		 error: function(res) {
	    		             alert("请求错误");
	    		         } 
	    	        }); 
	    	    });
	    	  } else if(layEvent === 'edit'){ //编辑
	    	    //do something
	    	       var ids=obj.data.id;
	    	    editMerchant(ids);
	    	    //同步更新缓存对应的值
	    	    obj.update({
	    	      username: '123'
	    	      ,title: 'xxx'
	    	    });
	    	  }else if(layEvent ==='changeLog'){
                  var ids=obj.data.id;
                  changeLog(ids);
			  }
	    	});
	});
	
	$(window).one("resize",function(){
		$(".merchantsAdd_btn").click(function(){
			var index = layui.layer.open({
				title : "添加门店",
				type : 2,
				/* content : "merchant/merchantsAdd.html", */
				content : "merchant/merchantsAdd.html",
				success : function(layero, index){
					
				}
			})			
			layui.layer.full(index);
		})
	}).resize();
	
	  function editMerchant(id){
	        var index = layui.layer.open({
	            title: "编辑门店",
	            type: 2,
	            content: "merchant/merchantsEdit.html?id="+id,
	            success: function (layero, index) {

	            }
	        });

	        //改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
	        $(window).resize(function () {
	            layui.layer.full(index);
	        });
	        layui.layer.full(index);
	  }
    function changeLog(id){
        var index = layui.layer.open({
            title: "银行卡更换记录",
            type: 2,
			area:['700px','500px'],
            content: "merchant/changeLog.html?id="+id
        });
    }

	</script> 
</body>
</html>